<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Exploding Light Bulb</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    const arrowHeadColor = '#4A4A4A'; // Dark gray for arrowheads
    const fontChinese = '28px "KaiTi", "SimSun", sans-serif';
    const fontLatin = 'italic 24px "Times New Roman", serif';

    // --- Helper Function to Draw Arrows ---
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 12, headAngle = Math.PI / 8) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        // Main line
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - headAngle), toY - headLength * Math.sin(angle - headAngle));
        ctx.lineTo(toX - headLength * Math.cos(angle + headAngle), toY - headLength * Math.sin(angle + headAngle));
        ctx.closePath();
        ctx.fillStyle = arrowHeadColor;
        ctx.fill();
    }

    // --- Drawing Coordinates ---
    const centerX = 250;
    const groundY = 350;
    const postHeight = 180;
    const bulbY = groundY - postHeight;
    const bulbRadius = 6;

    // --- Draw Ground ---
    ctx.beginPath();
    const groundStartX = 40;
    const groundEndX = 460;
    ctx.moveTo(groundStartX, groundY);
    ctx.lineTo(groundEndX, groundY);
    // Draw hash marks
    for (let x = groundStartX; x <= groundEndX; x += 20) {
        ctx.moveTo(x, groundY);
        ctx.lineTo(x - 10, groundY + 10);
    }
    ctx.stroke();

    // --- Draw Lamppost ---
    ctx.beginPath();
    ctx.moveTo(centerX, groundY);
    ctx.lineTo(centerX, bulbY);
    ctx.stroke();

    // --- Draw Light Bulb (as a circle) ---
    ctx.beginPath();
    ctx.arc(centerX, bulbY, bulbRadius, 0, 2 * Math.PI);
    ctx.stroke();

    // --- Draw Velocity Arrows ---
    const arrowLength = 70;
    // Angles in degrees to approximate the original image
    const angles = [35, 0, -35, -145, 145, 110]; 
    
    angles.forEach(deg => {
        const rad = deg * Math.PI / 180;
        const endX = centerX + arrowLength * Math.cos(rad);
        const endY = bulbY + arrowLength * Math.sin(rad);
        drawArrow(ctx, centerX, bulbY, endX, endY);
    });

    // --- Draw Labels ---
    ctx.fillStyle = 'black';
    ctx.textBaseline = 'middle';

    // Label "小灯泡" (Small light bulb)
    ctx.font = fontChinese;
    ctx.textAlign = 'right';
    ctx.fillText('小灯泡', centerX - 30, bulbY);

    // Label "灯柱" (Lamppost), written vertically
    ctx.textAlign = 'left';
    ctx.fillText('灯', centerX + 20, bulbY + postHeight / 2 - 18);
    ctx.fillText('柱', centerX + 20, bulbY + postHeight / 2 + 18);
    
    // Label "h" for height
    ctx.font = fontLatin;
    ctx.textAlign = 'center';
    ctx.fillText('h', centerX - 25, bulbY + postHeight / 2);

</script>
</body>
</html>